<template>
  <div>
    <el-card style="margin: 20px 0">
      <!-- 三级联动全局组件 -->
      <CategorySelect :show="scene!=0" @getCategoryId="getCategoryId">
        <CategorySelect />
      </CategorySelect>
    </el-card>
    <el-card>
      <!-- 底部有三部分进行切换 -->
      <!-- spu列表 -->
      <div v-show="scene == 0">
        <el-button :disabled="!category3Id" type="primary" icon="el-icon-plus" @click="addSpu">添加spu</el-button>
        <el-table :data="records" style="width: 100%" border>
          <el-table-column align="center" type="index" label="序号" width="80" />
          <el-table-column prop="spuName" type="" label="spu名称" width="width" />
          <el-table-column prop="description" label="spu描述" width="width" />
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row}">
              <hint-button title="添加sku" type="success" icon="el-icon-plus" size="mini" @click="addSku(row)" />
              <hint-button title="修改spu" type="warning" icon="el-icon-edit" size="mini" @click="updateSpu(row)" />
              <hint-button title="查看当前spu全部sku列表" type="info" icon="el-icon-info" size="mini" @click="showSkuList(row)" />
              <el-popconfirm icon-color="red" title="确定删除?" @onConfirm="deleteSpu(row)">
                <hint-button slot="reference" title="删除spu" type="danger" icon="el-icon-delete" size="mini" />
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align: center" :current-page="page" :page-sizes="[3, 5, 10]" :page-size="limit" layout=" prev, pager, next, jumper,->,sizes,total" :total="total" @size-change="handleSizeChange" @current-change="getSpuList" />
      </div>
      <SpuForm v-show="scene == 1" ref="spu" @changeScene="changeScene">1
      </SpuForm>
      <SkuForm v-show="scene == 2" ref="sku" @changeScene="changeSceneSku">2 </SkuForm>
    </el-card>
    <el-dialog :before-close="close" :title="`${spu.spuName}的所有SKU列表`" :visible.sync="dialogTableVisible">
      <el-table v-loading="loading" style="width: 100%" border :data="skuList">
        <el-table-column property="skuName" label="名称" width="width" />
        <el-table-column property="price" label="价格" width="width" />
        <el-table-column property="weight" label="重量" />
        <el-table-column label="默认图片" width="width">
          <template slot-scope="{row}">
            <img :src="row.skuDefaultImg" alt="" style="width:100px;height:100px;">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import SkuForm from './SkuForm'
import SpuForm from './SpuForm'
export default {
  name: 'Spu',
  components: { SkuForm, SpuForm },
  data() {
    return {
      loading: true,
      spu: {},
      skuList: [],
      dialogTableVisible: false,
      category1Id: '',
      category2Id: '',
      category3Id: '',
      // 控制三级联动的可操作性
      show: true,
      // 请求携带参数
      page: 1,
      limit: 3,
      records: [], // spu列表数据
      total: 0, // 总条数
      scene: 0 // 0代表展示spu列表数据 1代表添加与修改spu 2表示添加sku
    }
  },
  methods: {
    handleSizeChange(limit) {
      this.limit = limit
      this.getSpuList()
    },
    // 三级联动的自定义事件
    getCategoryId({ categoryId, level }) {
      // categoryId:获取到1,2,3级分类的id,level为了区分是几级id
      if (level === 1) {
        this.category1Id = categoryId
        this.category2Id = ''
        this.category3Id = ''
      } else if (level === 2) {
        this.category2Id = categoryId
        this.category3Id = ''
      } else {
        this.category3Id = categoryId
        // 获取spu列表数据进行展示
        this.getSpuList()
      }
    },
    // 获取spu列表数据
    getSpuList(pages = 1) {
      this.page = pages
      const { page, limit, category3Id } = this
      // 参数 page limit level
      this.$API.spu.reqSpuList(page, limit, category3Id).then(res => {
        if (res.code === 200) {
          this.total = res.data.total
          this.records = res.data.records
        }
      })
    },
    // 点击添加
    addSpu() {
      this.scene = 1
      // 通知子组件发请求
      // console.log(this.$refs.spu)
      this.$refs.spu.addSpuData(this.category3Id)
    },
    // 修改spu按钮
    updateSpu(row) {
      this.scene = 1
      // 获取spuform子组件,调用子组件的初始化数据方法
      this.$refs.spu.initSpuDate(row)
    },
    // 点击取消按钮
    changeScene(e) {
      this.scene = e
      this.getSpuList(this.page)
    },
    // 删除spu
    deleteSpu(row) {
      this.$API.spu.reqDeleteSpu(row.id).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.getSpuList(this.page)
        }
      })
    },
    // 添加sku
    addSku(row) {
      // 切换场景
      this.scene = 2
      // 通知子组件发送请求获取数据
      this.$refs.sku.getData(this.category1Id, this.category2Id, row)
    },
    changeSceneSku(e) {
      // 切换场景
      this.scene = e
    },
    // 展示所有sku列表
    showSkuList(row) {
      // console.log(row)
      this.dialogTableVisible = true
      this.spu = row
      // 获取sku列表数据
      this.$API.spu.findBySpuId(row.id).then(res => {
        if (res.code === 200) {
          this.skuList = res.data
          this.loading = false
        }
      })
    },
    // 关闭对话框回调
    close(done) {
      this.loading = true
      this.skuList = []
      done()
    }
  }
}
</script>

<style></style>
